<template>
    <view class="art">
        <view class="title">
            <input type="text" placeholder="请输入标题" placeholder-class="pltxt" v-model="artTitle" />
        </view>
        <view class="pd20 content">
            <myEditor :content="str" ref="edit"></myEditor>
        </view>
        <view>
            <van-button type="primary" class="w100" size="small" @click="submit">确认发布</van-button>
        </view>
    </view>
</template>

<script setup>
    import {
        onMounted,
        ref,
    } from 'vue';
    import {
        getImgSrc,
        getProvince
    } from '../../uitls/tools.js';
    import myEditor from "../../components/myedit/myedit.vue"
    // 初始化 
    const artTitle = ref()
    const str = ref();
    let edit = ref();
    let artObj = {
        title: '',
        content: '',
        des: '',
        imgUrl: '',
        province: ""
    };
    //提交表单
    function submit() {

        // 处理数据
        let art = edit.value.sbmit();
        artObj.title = artTitle.value;
        artObj.content = art.html;
        artObj.des = art.text.slice(0, 50);
        artObj.imgUrl = getImgSrc(art.html);
        //标题不能为空
        if (artObj.title == '' || artObj.content == '') return;
        uni.showLoading({
            title: '发布中'
        })
        //添加到数据库
        addEdit();
    }
    //添加到数据库
    const db = uniCloud.database()

    function addEdit() {
        db.collection('fyquanzi_art').add({
            ...artObj
        }).then(res => {
            uni.hideLoading();
            uni.showToast({
                title: '发布成功'
            })
            setTimeout(() => {
                uni.reLaunch({
                    url: '/pages/index/index'
                })
            }, 800)
        })
    }
    onMounted(() => {
        //获取省
        getProvince().then(res => {
            artObj.province = res;
        });
    })
</script>

<style scoped lang="scss">
    .art {
        padding: 30rpx;
        font-size: 32rpx
    }

    .title {
        width: 100%;
        border-bottom: 1px solid #eee;
        padding: 10rpx;

        input {
            border: none;
            font-size: 42rpx;
        }

        .pltxt {
            font-size: 42rpx;
            color: #c3c3c3;
        }
    }

    .content {
        font-size: 28rpx;
        height: calc(100vh - 400rpx);
        margin-bottom: 30rpx;
    }
</style>